import './index.less'
import { Button, Form, FormInstance, Input, Modal } from 'antd'
import { loginPasswordConfirmVerify, loginPasswordVerify } from '@/utils/validator'
export default function DDLogin(props: { open: boolean; form: FormInstance; onFinish: () => void; loading: boolean }) {
  const onValuesChange = (changedValues: any) => {
    const trimKeys = ['newpassword', 'password_confirm']
    trimKeys.forEach((key) => {
      if (changedValues[key]) {
        const trimmedKey = changedValues[key].trim()
        props.form.setFieldsValue({
          [key]: trimmedKey,
        })
      }
    })
  }
  return (
    <Modal maskClosable open={props.open} footer={null} closable={false}>
      <div className="user_first_login_wrap">
        <div className="uflw_title">首次登录，请修改密码</div>
        <Form form={props.form} className="uflw_form_box" onFinish={props.onFinish} onValuesChange={onValuesChange}>
          <Form.Item
            name="newpassword"
            hasFeedback
            rules={[
              { required: true, message: '请输入密码' },
              {
                validator: loginPasswordVerify,
              },
            ]}
          >
            <Input.Password placeholder="新密码" maxLength={20} showCount />
          </Form.Item>
          <Form.Item
            name="password_confirm"
            dependencies={['newpassword']}
            hasFeedback
            rules={[
              { required: true, message: '请输入密码' },
              ({ getFieldValue }) => ({
                validator: (_, value) => loginPasswordConfirmVerify(_, value, getFieldValue('newpassword')),
              }),
            ]}
          >
            <Input.Password placeholder="确认密码" maxLength={20} showCount />
          </Form.Item>
          <Button block type="primary" htmlType="submit" loading={props?.loading}>
            确认并登录
          </Button>
        </Form>
      </div>
    </Modal>
  )
}
